<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<title>注册页面</title>
<style>
* {
	padding: 0px;
	margin: 0px;
	cursor: pointer;
}
a{
	text-decoration: none;
}
a:HOVER,a:VISITED,a:LINK{
	color:black;
}
ul li {
	list-style: none;
}
#quan {
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0.3;
	display: none;
}

.nav {
	position: relative;
	height: 200px;
	width: 850px !important;
	margin: 0 auto;
}

.p1 {
	display: block;
	position: absolute;
}

.p2 {
	position: relative;
	left: 100px;
	top: 120px;
}

.p2 img, .p2 input {
	position: absolute;
}

.p2 input, .p3 input, .p4 input, .p5 input {
	width: 246px;
	height: 19px;
}

.p3 {
	position: relative;
	top: 154px;
	left: 100px;
}

.p3 img, .p3 input {
	position: absolute;
}

.p4 {
	position: relative;
	top: 120px;
	left: 375px;
}

.p4 img, .p4 input {
	position: absolute;
}

.p5 {
	position: relative;
	top: 154px;
	left: 375px;
}

.p5 img, .p5 input {
	position: absolute;
}

.p6 {
	position: absolute;
	top: 120px;
	right: 113px;
}

.place {
	width: 300px;
	margin: 0 auto;
	/* border: 1px solid red; */
	padding-left: 10px;
	position: absolute;
	top:100px;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
	z-index: 3;
}

.place .place_top {
	position: relative;
	background-color: #FEEED5;
}

.place .place_top .place_top_span1 {
	margin-left: 24px;
	padding-right: 96px;
}

.place .place_top .l1 {
	position: absolute;
	top: 6px;
}

.place .place_top .place_top_span2 {
	padding-left: 14px;
}
.place .content{
	background-color: #FFFFFF;
}
.place .contentchild{
	background-color: #FFFFFF;
	border-bottom: 1px dashed black;
	padding: 10px 0 10px 10px;
}
.place #xuan{
	display: block;
}

.place .contentchild #xuan_2,.place .contentchild #xuan_3{
	display: none;
}
.place .foot{
	padding: 20px 10px 10px 40px;
	background-color: #FFFFFF;
}
#content{
	padding-top:40px;
	width:300px;
	margin: 0 auto;
}
#content #c_ul li{
	margin-bottom: 10px;
}
</style>
<script type="text/javascript">
	function shade() {
		document.getElementById("quan").style.display = "block";
		document.getElementById("place").style.display="block";
	}
	function close(){
		document.getElementById("quan").style.display = "none";
		document.getElementById("place").style.display="none";
	}
		
	function getValue(t){
		var name=t.value;
		if(name=="x1"){
			document.getElementById("xuan_1").style.display="block";
			document.getElementById("xuan_2").style.display="none";
			document.getElementById("xuan_3").style.display="none";
		}
		if(name=="x2"){
			document.getElementById("xuan_1").style.display="none";
			document.getElementById("xuan_2").style.display="BLOCK";
			document.getElementById("xuan_3").style.display="none";
		}
		if(name=="x3"){
			document.getElementById("xuan_1").style.display="none";
			document.getElementById("xuan_2").style.display="none";
			document.getElementById("xuan_3").style.display="block";
		}
	}
	<%--Ajax--%>
	<%--初始化--%>
	var xhr;
	function createXHR(){
		try {
			return new XMLHttpRequest();	
		} catch (e) {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		
	}
	function checkName(){
		var name=document.getElementById("c_input1").value;
		
		xhr=createXHR();
		xhr.onreadystatechange=callback;
		xhr.open("Get","UserRegisterServlet?name="+name,true);
		xhr.send(null);
		
	}
	
	function callback(){
		if(xhr.status==200 && xhr.readyState==4){
			var cname=document.getElementById("span_1");
			var name=document.getElementById("c_input1").value;
			//alert(name);
			var result=xhr.responseText;
				if(result=="cunzai"){
					cname.innerHTML="该用户已存在";
				}else{
					cname.innerHTML="用户名正确";	
			}
		}
	}
</script>
<script >
	
	$(function(){
		//$("#c_input1").blur(function(){
		//var name=$(this).val();
			
		//if(" ".equals(name)){
		//	alert(name);
		//		$("#span_1").html("不能为空");
		//	}
		//});
		$(".f1").bind('click', function() {
			var check=$("input[type='checkbox']");
			var str="";
			for(var i=0;i<check.length;i++){
				if (check[i].checked) {

					str+=check[i].value+",";
				};
			}
			str.substr(0, str.length-1);
			document.getElementById("input_2").value=str;
			alert(str);
			$(this).parent().parent().css('display', 'none');
			$("#quan").css('display', 'none');

		
		});	

		$(".f2").bind('click',  function() {
			document.getElementById("input_2").value="请选择工作地点";
			$(this).parent().parent().css('display', 'none');
			$("#quan").css('display', 'none');
		});
		 
		$(".f3").bind('click', function() {

			var name="河南+郑州";
			 var value=document.getElementById("input_2").value;
			  value="";
			value=name;
			document.getElementById("input_2").value=value;
			alert(document.getElementById("input_2").value);
			$(this).parent().parent().css('display', 'none');
			$("#quan").css('display', 'none');
		});
	});
</script>
</head>
<body>
		<div class="top">
			<div class="nav">
				<img alt="" src="image/bg.png" class="p1">
				<div class="p2">
					<img alt="" src="image/select_btn.png" /> <input type="text"
						value="请选择职务类别" />
				</div>

				<div class="p3">

					<img alt="" src="image/select_btn.png" /> <input type="text"
						value="请选择行业类别" />
				</div>
				<div class="p4">

					<img alt="" src="image/select_btn.png" /> <input type="text"
						value="请选择工作地点" onclick="shade()"  id="input_2"/>
				</div>
				<div class="p5">

					<img alt="" src="image/select_btn.png" /> <input type="text"
						value="请输入职位或公司关键字" />
				</div>

				<img alt="" src="image/search.png" class="p6" />
			</div>
		</div>
		<!--遮罩层-->
		<div id="quan"></div>
		
		<!-- 工作地点 -->
		<div class="place" id="place">
			<div class="place_top">
				<span class="place_top_span1">请选择工作地点：</span> <img alt=""
					src="image/closer.png" class="l1" /> <span class="place_top_span2"><a href="javascript:close()">关闭</a></span>
			</div>
			<div class="content">
				<select id="xuan" onchange="getValue(this)">
					<option id="" value="x1">河南</option>
					<option id="" value="x2">北京</option>
					<option id="" value="x3">安徽</option>
				</select>
			</div>
			<div class="contentchild" >
				<ul id="xuan_1">
					<li><input type="checkbox" id="test" value="郑州市" /> 郑州市 &nbsp;<input
						type="checkbox" value="洛阳市"/> 洛阳市</li>
					<li><input type="checkbox" value="焦作市"/> 焦作市 &nbsp;<input
						type="checkbox" value="新乡市"/> 新乡市</li>
					<li><input type="checkbox" value="鹤壁市"/> 鹤壁市 &nbsp;<input
						type="checkbox" value="安阳市"/> 安阳市</li>
					<li><input type="checkbox" value="信阳市"/> 信阳市 &nbsp;<input
						type="checkbox" value="开封市"/> 开封市</li>
					<li><input type="checkbox" value="其他地区"/> 其他地区</li>
				</ul>

				<ul id="xuan_2">
					<li><input type="checkbox" value="东城区"> 东城区 &nbsp;<input
						type="checkbox" value="西城区"> 西城区</li>
					<li><input type="checkbox" value="崇文区">崇文区 &nbsp;<input
						type="checkbox" value="宣武区"> 宣武区</li>
					<li><input type="checkbox" value="朝阳区"> 朝阳区 &nbsp;<input
						type="checkbox" value="海淀区">海淀区</li>
					<li><input type="房山区" > 房山区 &nbsp;<input
						type="checkbox" value="顺义区"> 顺义区</li>
					<li><input type="checkbox" value="其他地区"> 其他地区</li>
				</ul>

				<ul id="xuan_3">
					<li><input type="checkbox" value="合肥市"> 合肥市 &nbsp;<input
						type="checkbox" value="合肥市">合肥市</li>
					<li><input type="checkbox" value="蚌埠市">蚌埠市 &nbsp;<input
						type="checkbox" value="淮南市">淮南市</li>
					<li><input type="checkbox" value="淮北市">淮北市 &nbsp;<input
						type="checkbox" value="铜陵市">铜陵市</li>
					<li><input type="checkbox" value="桐城市">桐城市 &nbsp;<input
						type="checkbox" value="滁州市"> 滁州市</li>
					<li><input type="checkbox" value="其他地区"> 其他地区</li>
				</ul>
			</div>
			<div class="foot">
				<img alt="" src="image/confirm.png" class="f1"> <img alt=""
					src="image/concel.png" class="f2"> <img alt=""
					src="image/default.png" class="f3">
			</div>
		</div>
		<form action="UserResServlet" method="post">
		<div id="content">
			<ul id="c_ul">
				<li>用户名：<input type="text" id="c_input1" onblur="checkName()" name="c_input1"><span id="span_1"></span></li>
				<li>密码：<input type="password" id="c_input2" name="c_input2"><span id="span_2"></span ></li>
				<li><input type="submit" value="注册"></li>
			</ul>
		</div>
		</form>	
			
		
	
</body>
</html>